<!--
author: 何其沆(pooky)
desc: Others - Commission Percentage
date: 2021-11-12
-->
<template>
  <div class="commission-percentage">
    <search @search="handleSearch" @reset="handleReset">
      <SearchInput searchText="Client Name">
        <a-input v-model:value="clientName" />
      </SearchInput>
    </search>
    <e-container style="margin-top: 24px">
      <a-table
        :columns="columns"
        :data-source="data"
        class="ant-table-striped"
        :pagination="false"
        :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)"
      >
        <template #emptyText>
          <e-empty />
        </template>
      </a-table>
    </e-container>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import EContainer from '@/components/EContainer.vue'
import EEmpty from '@/components/EEmpty.vue'
import Search from '../../components/Search.vue'
import SearchInput from '../../components/SearchInput.vue'

import pageColumns from '@/assets/script/page_columns.js'
const commissionPercentage = pageColumns.commissionPercentage
// 列
const columns = reactive(commissionPercentage)
const data = ref([
  {
    clientName: 'ShortName7359',
    commissionFactor: '1.00',
    initialDate: '2020-04-25',
    takeoverDate: '2021-10-20',
    commissionPercentage: '100%'
  },
  {
    clientName: 'ShortName7359',
    commissionFactor: '1.00',
    initialDate: '2020-04-25',
    takeoverDate: '2021-10-20',
    commissionPercentage: '100%'
  }
])
// 搜索条件
const clientName = ref('')
// 当前页码
const current = ref(1)
// 每页条数
const pageSize = ref(10)
// 总条数
const total = ref(2)
/**
 * 获取数据列表
 * @returns {Promise<void>}
 */
const getList = async () => {}
/**
 * 搜索
 */
const handleSearch = () => {
  current.value = 1
  getList()
}
/**
 * 重置
 */
const handleReset = () => {
  clientName.value = ''
}
/**
 * 切换页码
 * @param cur
 */
const changeSize = cur => {
  current.value = cur
  getList()
}
/**
 * 初始化
 */
onMounted(() => {
  getList()
})
</script>

<style scoped lang="less">
@import '@/assets/style/reset_table';
@import '@/assets/style/reset_form';

.search-item {
  margin-right: 24px;
  .search-text {
    color: @text-gray;
    font-size: 14px;
    margin-bottom: 6px;
  }
}
</style>
<route lang="yaml">
name: Commission Percentage
path: /commission-percentage/
</route>
